<template>
	<div class="app-container">
		<div class="filter-container">
			<el-input v-model="listQuery.title" :placeholder="$t('输入名称')" style="width: 200px" class="filter-item" @keyup.enter="handleFilter" />
			&nbsp; &nbsp;
			<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter"> 查找 </el-button>
			<el-button v-waves type="primary" icon="el-icon-edit" @click="handleCreate"> 地图添加 </el-button>
		</div>

		<el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
			<el-table-column width="80" align="center" label="编号">
				<template #default="{ row }">
					<span>{{ row.id }}</span>
				</template>
			</el-table-column>

			<el-table-column width="180px" align="center" label="日期">
				<template #default="{ row }">
					<span>{{ $timeFormat(row.creatTime) }}</span>
				</template>
			</el-table-column>

			<el-table-column width="220px" align="center" label="方案名称">
				<template #default="{ row }">
					<span>{{ row.titleContent }}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作"  width="230">
				<template #default="{row, $index}">
          <el-button
            type="primary"
            size="mini"
            @click="handleUpdate(row)"
          >
            编辑
          </el-button>          
          <el-button            
            size="mini"
            @click="handleModifyStatus(row, 'draft')"
          >
            地图
          </el-button>
          <el-button
            v-if="row.status !== 'deleted'"
            size="mini"
            type="danger"
            @click="handleDelete(row, $index)"
          >
            删除
          </el-button>
        </template>
			</el-table-column>
		</el-table>

		<el-pagination
			v-show="total > 0"
			:total="total"
			v-model:page="listQuery.currentPage"
			v-model:limit="listQuery.pageCount"
			@current-change="handleCurrentChange"
		/>
		<SchemeDialog
			@updateData="updateData"
			@createData="createData"
			ref="dialogPop"
			v-model="dialogFormVisible"
			v-model:dialogStatus="dialogStatus"
		></SchemeDialog>
	</div>
</template>

<script lang="ts">
import { getArticles } from '/@/request/articles';
import { ArticleModel } from '/@/model/articleModel';
import fanghuJiuyuanJson from '/@/mock/fanghuJiuyuan.json';
import { useRouter } from 'vue-router';
import { defineComponent, reactive, toRefs, onMounted, onBeforeMount, ref } from 'vue';
import HttpReqApi from '/@/utils/shf/http/HttpReqApi';

import SchemeDialog from './components/SchemeDialog.vue';
import { ElMessage } from 'element-plus';

export default defineComponent({
	components: { SchemeDialog },
	setup() {
		const dialogPop = ref(null);
		const router = useRouter();
		const dataMap = reactive({
			dialogFormVisible: false,
			dialogStatus: '',
			total: 0,
			joinTargetArr: [],
			list: Array<ArticleModel>(),
			listLoading: true,
			listQuery: {
				currentPage: 1,
				pageCount: 10,
				title: '',
				economicTarget: '',
			},
			async updateData(tempArticleModel) {
				console.log('udpateData = ', tempArticleModel);
				await HttpReqApi.updateHelpscheme(tempArticleModel);
				ElMessage.success({
					message: '修改成功',
					type: 'success',
					duration: 2000,
				});
				dataMap.getList();
			},
			handleCreate() {
				router.push({
					path: '/menu/menu1/menu12/menu127',
					query: { type: '', name: '',schemeId:'' },
				});
			},
			handleUpdate(row: any) {
				dataMap.dialogFormVisible = true;
				dataMap.dialogStatus = 'update';
				(dialogPop as any).value.handleUpdate(row, true);
				
			},
			handleModifyStatus(row:any){
				router.push({
					path: '/menu/menu1/menu12/menu127',
					query: { type: '方案', name: '',schemeId:row.id },
				});
			},
			handleRedirect(row: any) {
				router.push({
					path: '/menu/menu1/menu12/menu121',
					query: { id: row.id },
				});
			},
			handleFilter() {
				dataMap.listQuery.currentPage = 1;
				dataMap.getList();
			},
			handleCurrentChange(page?: any) {
				dataMap.getList(page);
			},
			async handleDelete(row) {
				console.log('row = ', row);
				await HttpReqApi.delHelpSchemes({ id: row.id });
				this.getList();
			},
			async getList(page?: any, total?: any, limit?: any, data?: any) {
				dataMap.listLoading = true;

				if (page) {
					dataMap.listQuery.currentPage = page;
				}
				if (limit) {
					dataMap.listQuery.pageCount = limit;
				}
				dataMap.listLoading = true;

				if (data) {
					dataMap.list = data.data;
					dataMap.total = data.total;
				} else {
					const data: any = await HttpReqApi.getHelpschemes(dataMap.listQuery);
					//const data=zhihuiJigouJson
					dataMap.list = data?.data ?? [];
					dataMap.total = data?.total ?? 0;
				}

				// Just to simulate the time of the request
				setTimeout(() => {
					dataMap.listLoading = false;
				}, 0.5 * 1000);
			},
		});
		onBeforeMount(async () => {
			let list1: any = await HttpReqApi.getEconomicTargets();
			dataMap.joinTargetArr = list1;
		});
		onMounted(async () => {
			dataMap.getList();
		});
		return { ...toRefs(dataMap), dialogPop };
	},
});
// }
</script>

<style lang="scss" scoped>
.edit-input {
	padding-right: 100px;
}

.cancel-btn {
	position: absolute;
	right: 15px;
	top: 10px;
}
</style>
